<template>
	<view class="invite" v-if="share">
		<view class="invite-code">
			<!-- <view class="invite-title">邀请链接</view>
			<view class="invite-address">
				<view class="address">{{share.url}}</view>
				<view class="copy" @click="copy(share.url)">复制</view>
			</view> -->
			<view class="title-box" style="margin-top: 30rpx;">
				<view class="title-left"></view>
				<view class="font-34 bold">{{$t('推广链接')}}</view>
			</view>
			<view class="ice-mt-30" style="margin-top: 60rpx;">
				<u--input border="surround" :value="share.url" readonly></u--input>
			</view>
			<view class="ice-mt-30">
				<u-button size="large" shape="circle" @click="copy(share.url)" :text="$t('复制')" color="linear-gradient(106deg, #258CE9, #DA2B45)"></u-button>
			</view>
			
			<view class="title-box" style="margin-top: 30rpx;">
				<view class="title-left"></view>
				<view class="font-34 bold">{{$t('推广二维码')}}</view>
			</view>
			<view class="ice-mt-30" style="margin-top: 60rpx;text-align: center;">
				<img style="width:300rpx;" :src="share.qrcode" alt="">
			</view>
			<!-- <view class="qrcode-title">邀请二维码</view>
			<view class="qrcode">
				<img style="width:300rpx;" :src="share.qrcode" alt=""></view>
			<view class="quit">请截图二维码</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				share:null,
			}
		},
		onLoad(){
			uni.setNavigationBarTitle({
				title: this.$t("推广链接")
			})
			this.getShare()
		},
		methods: {
			copy(url){
				uni.setClipboardData({
					data: url,
					success:()=>{
						uni.showToast({
							title:this.$t('复制成功'),
							icon:'success'
						})
					}
				});
			},
			getShare(){
				uni.$ice.post('user/share', {}, false).then(res => {
					this.share = res.data
					uni.stopPullDownRefresh()
							
				}).catch(err => {
							
				})
			}
		}
	}
</script>

<style scoped>
	.invite{
		padding-top: 130rpx;
	}

	.invite .invite-code{
		width: 91%;
		box-sizing: border-box;
		background: #181818;
		border-radius: 32rpx;
		border:1px solid #252525;
		margin: 0 auto;
		padding: 30rpx 20rpx
	}

	.invite .invite-code .invite-title{
		font-size: 40rpx;
		font-weight: 700;
		color: #fff;
		padding-bottom: 110rpx
	}

	.invite .invite-code .invite-address{
		width: 91%;
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: 16rpx;
		opacity: 1;
		border: 1px solid #9125ff;
		display: flex;
		flex-wrap: nowrap;
		padding: 8rpx 10rpx 8rpx 30rpx;
		justify-content: space-between;
		margin-bottom: 80rpx
	}

	.invite .invite-code .invite-address .address{
		width: 364rpx;
		box-sizing: border-box;
		line-height: 72rpx;
		color: #999;
		margin-right: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.invite .invite-code .invite-address .copy{
		width: 196rpx;
		box-sizing: border-box;
		height: 72rpx;
		border-radius: 58rpx;
		background-image: linear-gradient(139deg, #9125ff, #6326ff);
		color: #fff;
		text-align: center;
		line-height: 72rpx
	}

	.invite .invite-code .qrcode-title{
		font-size: 30rpx;
		font-weight: 400;
		color: #8e25ff;
		text-align: center;
		margin-bottom: 38rpx
	}

	.invite .invite-code .qrcode{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 62rpx
	}

	.invite .invite-code .quit{
		width: 298px;
		box-sizing: border-box;
		height: 36px;
		background-image: linear-gradient(139deg, #c925ff, #5226ff);
		border-radius: 33px;
		text-align: center;
		line-height: 36px;
		color: #fff;
		font-size: 15px;
		margin: 0 auto
	}
</style>